<template>
  <div class="detail-item" v-if="rateData != null">
    <div class="content-div">
      <div class="data-item" v-for="(item, index) of rateData.data" :key="item.title">
        <transition  mode="out-in" appear
          enter-active-class="animated zoomIn animate50 animateDelay100"
        >
          <p :key="item.title + item.content" class="item-img" :style="'backgroundImage: url(\'static/images/rate-item.png\'); width: '+ getWidthStyle(item.title) +';color:' + bgColor + ''">{{item.title}}</p>
        </transition>
        <transition mode="out-in" appear
          enter-active-class="animated zoomIn animate50 animateDelay150"
        >
          <div :key="item.content + item.title" class="data-content" :class="rateData.data.length >1 && index < rateData.data.length - 1 ? 'border-right' : ''">
            <p class="rate">{{item.content}}</p>
            <p class="unit">%</p>
          </div>
        </transition>
      </div>
    </div>
    <div class="clock-item">
        <clock :radius="radius" :rangeColor="rangeColor"></clock>
    </div>
    <div class="time-item">
      <div class="month-week">
        <p class="week">{{week}}</p>
        <p class="month">{{monthStr}}</p>
      </div>
      <div class="date-div">
        <img src="static/images/date-bg.png" class="date-bg">
        <p class="date">{{dateStr}}</p>
      </div>
      <div class="nongli">
        <p class="nongli-title">农历</p>
        <p class="nongli-content">{{nongli}}</p>
      </div>
    </div>
    <img src="static/images/logo1.png" class="logo">
    <transition mode="out-in"
      enter-active-class="animated zoomIn animate50" appear
    >
      <p class="title-zh" :style="'color:' + titleColor + ''" :key="rateData.titleZh">{{rateData.titleZh}}</p>
    </transition>
    <transition mode="out-in"
      enter-active-class="animated zoomIn animate50 animateDelay50" appear
    >
      <p class="title-en" :style="'color:' + titleColor + ''" :key="rateData.titleEn">{{rateData.titleEn}}</p>
    </transition>
    <p class="title-border">{{subTitle}}</p>
    <em></em>
  </div>
</template>
<script>
import Clock from './Clock'
import {showCal} from '@/assets/today.js'
export default {
  name: 'RateDetail',
  data () {
    return {
      widthStyle: '273px',
      radius: 300,
      rangeColor: '#000000',
      dateStr: '',
      monthStr: '',
      nongli: '',
      week: '',
      dateTimer: null
    }
  },
  props: {
    rateData: Object,
    bgColor: String,
    subTitle: String,
    titleColor: String
  },
  computed: {
  },
  components: {
    Clock
  },
  methods: {
    getWidthStyle (title) {
      return 133 + title.length * 35 + 'px'
    },
    getDate () {
      if (this.dateTimer) {
        clearTimeout(this.dateTimer)
      }
      let this_ = this
      this.dateTimer = setTimeout(function () {
        this_.getDateTime()
        this_.getDate()
      }, 1000 * 60 * 60)
    },
    getDateTime () {
      var date = new Date()
      this.monthStr = date.getFullYear() + '年' + (date.getMonth() + 1) + '月'
      if (date.getDate() < 10) {
        this.dateStr = '0' + date.getDate()
      } else {
        this.dateStr = date.getDate()
      }
      var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.week = weeks[date.getDay()]
      this.nongli = showCal()
    }
  },
  mounted () {
    this.getDateTime()
    this.getDate()
  }
}
</script>
<style lang="stylus" scoped>
  .detail-item:hover em
    right : -300px
    top: 640px
    height: 340px
    transition: 1.5s
  .detail-item
    width: 100%
    height: 100%
    position: relative
    overflow: hidden
    .logo
      position: absolute
      right: 60px
      bottom: 40px
    .title-zh, .title-en
      position: absolute
      left: 0
      width: 100%
      display: flex
      justify-content: center
      align-items: center
      font-weight: bold
      color: #fff
    .title-zh
      height: 150px
      top: 20px
      font-size: 80px
    .title-en
      height:60px
      top: 170px
      font-size: 50px
    .title-border
      position: absolute
      right: 20px
      top: 760px
      width: 300px
      height: 120px
      display: flex
      justify-content: center
      align-items: center
      font-size: 70px
      color: #FFFFFF
      font-weight: bold
      transform: rotate(-7deg)
    em
      position: absolute
      right: 280px
      top: 760px
      width: 80px
      height: 120px
      background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0))
      transform: skewx(-18deg)
    .clock-item
      position: absolute
      left: 30px
      bottom: 0px
    .content-div
      width: 1760px
      height: 280px
      position: absolute
      left: 80px
      top: 300px
      display: flex
      justify-content: center
      align-items: flex-end
      .data-item
        width: 550px
        height: 200px
        padding-left: 50px
        .item-img
          font-size: 38px
          font-weight: bold
          color: #196bca
          background-repeat: no-repeat
          background-size: cover
          height: 81px
          padding-left: 20px
          padding-top: 32px
          margin-top: -30px
        .data-content.border-right
          &:before
            border-color: #fff
            border-width: 8px
        .data-content
          width: 100%
          height: 200px
          display: flex
          >p
            display: flex
          .rate
            color: #FFFFFF
            font-size: 120px
            font-weight: bold
            padding-left: 50px
            padding-right: 20px
            padding-top: 30px
          .unit
            color: #FFFFFF
            font-size: 90px
            padding-top: 85px
    .time-item
      position: absolute
      left: 515px
      bottom: 0px
      width: 650px
      height: 210px
      display: flex
      align-items: center
      justify-content: flex-start
      .month-week, .nongli
        display: flex
        flex-direction: column
        justify-content: center
        align-items: flex-start
        color: #333
        .week
          font-size: 60px
          font-weight: bold
          padding-bottom: 10px
        .month
          padding-top:10px
          font-size: 35px
          font-weight: bold
      .month-week
        padding-right: 20px
      .nongli
        padding-left: 60px
        .nongli-title
          color: #000
          font-size: 35px
          font-weight: bold
          padding-bottom: 15px
        .nongli-content
          color: #000
          font-size: 55px
          font-weight: bold
          padding-top: 15px
      .date-div
        width: 150px
        height: 130px
        .date-bg
          position: absolute
          left: 0
          top: 0
          right: 0
          bottom: 0
          width: 100%
          height: 100%
        .date
          position: absolute
          left: 0
          top: 0
          width: 100%
          height: 100%
          display: flex
          justify-content: center
          align-items: center
          font-size: 120px
          font-weight: bold
          color: #fff
</style>
